<template>
  <div class="coupon-page">
    <div class="title">店铺关注（已关注：{{ query.total }}）</div>
    <div class="attent-query">
      <div class="select">
        <el-checkbox
          :value="select"
          @change="allSelect"
          :indeterminate="indeterminate"
          >全选</el-checkbox
        >
        <span @click="clearShopsAttent">批量删除</span>
      </div>
      <div class="flex"></div>
      <div class="search">
        <el-input
          size="small"
          placeholder="商品名称/订单ID，并按回车键确定"
          prefix-icon="el-icon-search"
          v-model="query.search"
          @keypress.native.enter="getShopList"
        >
        </el-input>
      </div>
    </div>
    <div class="shop-list" v-loading="loading">
      <ShopItem2
        @select="selectShop"
        @refresh="getShopList"
        :shop="item"
        :select="selectShops.indexOf(item.shop_id) !== -1"
        v-for="(item, index) in shopList"
        :key="index"
      />
    </div>
    <center class="page-box">
      <Pages1
        @change="getShopList"
        :total="false"
        :pages="false"
        :jump="false"
        v-model="query.current"
        :size="query.length"
        :count="query.total"
      />
    </center>
  </div>
</template>

<script>
import api from "@/api";
import { mapState } from "vuex";
import ShopItem2 from "@/components/ShopItem/ShopItem2.vue";
import Pages1 from "@/components/Pages/Pages1.vue";

export default {
  name: "UserCoupon",
  components: { ShopItem2, Pages1 },
  computed: {
    ...mapState("user", ["userinfo"]),
    indeterminate() {
      if (!this.selectShops.length) return false;
      else {
        if (this.selectShops.length < this.shopList.length) return true;
        else return false;
      }
    },
  },
  data() {
    return {
      loading: false,
      select: 0,
      selectShops: [],
      query: {
        current: 1,
        length: 2,
        total: 0,
      },
      shopList: [],
    };
  },
  watch: {
    selectShops() {
      if (
        this.selectShops.length &&
        this.selectShops.length === this.shopList.length
      ) {
        this.select = true;
      } else {
        this.select = false;
      }
    },
  },
  created() {
    this.getShopList();
  },
  methods: {
    allSelect(val) {
      if (val) {
        this.selectShops = this.shopList.map((item) => item.shop_id);
      } else {
        this.selectShops = [];
      }
      this.$forceUpdate();
    },
    async getShopList() {
      this.loading = true;
      this.shopList.splice(0, this.shopList.length);
      let result = await api.SHOPS_COLLECTION_LIST(this.query);
      this.query = Object.assign({}, result, { data: null });
      this.shopList = result.data;
      this.loading = false;
    },
    selectShop(shop, select) {
      if (shop === select) {
        this.selectShops.push(select);
      } else {
        this.selectShops.splice(this.selectShops.indexOf(shop), 1);
      }
    },
    async clearShopsAttent() {
      if (this.selectShops.length) {
        this.loading = true;
        for (let index in this.selectShops) {
          let id = this.selectShops[index];
          await api.SHOPS_COLLECTION({ shop_id: id, status: 0 });
        }
        await this.getShopList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-page {
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #333333;
    line-height: 28px;
    margin-bottom: 20px;
  }
  .attent-query {
    display: flex;
    margin: 20px 0;
    align-items: center;
    ::v-deep {
      .el-checkbox {
        margin-left: 21px;
        margin-right: 26px;
      }
      .el-checkbox__label {
        font-size: 16px;
        padding: 0 0 0 16px;
      }
    }
    .select {
      font-size: 16px;
      color: #333333;
      span {
        cursor: pointer;
        &:hover {
          color: #d52c1a;
        }
      }
    }
    .search {
      width: 320px;
    }
  }
  .shop-list {
    min-height: 400px;
  }
  .page-box {
  }
}
</style>
